<template>
    <div class="my_contianer">
        <img src="../assets/image/b3.png" class="background">
        <div class="center inner">
            <div style="width: 50%">
                <div class="room-member" style="margin-bottom: 100px">
                    <h2>已准备</h2>
                    <p v-for="i in this.ready_user_list">
                        - {{i.substring(0, 4) + "..." }}
                    </p>
                    <br>
                    <h2 class='noready'>未准备</h2>
                    <p class='noready' v-for="i in this.noready_user_list">
                        x {{i.substring(0, 4) + "..."}}
                    </p>
                </div>
                <headerButton @click.native="ready_click">
                    <div>{{this.ready === true ? "取消准备" : "准  备"}}</div>
                </headerButton>
                <br>
                <headerButton>
                    <div>强制开启</div>
                </headerButton>
            </div>
        </div>
    </div>
</template>

<script>
    import headerButton from "../components/button/headerButton.vue"
    import websocket from "../method/webSocket.js"

    export default {
        data() {
            return {
                ready: false,
                ready_user_list: [],
                noready_user_list: [],
            }
        },
        methods: {
            ready_click() {
                this.ready = !this.ready;
                let token = localStorage.getItem("token")
                websocket.send(`sing_in ${token} ${this.ready === true ? "in" : "out"}`)
            },
            message(_message) {
                console.log(_message);
            },
            set_usrlst(data) {
                this.ready_user_list = data.nowuser;
                let alluser = data.alluser;
                let allSet = new Set(alluser);
                let readySet = new Set(this.ready_user_list);

                let complementSet = new Set()

                allSet.forEach(function (element) {
                    // 如果 set1 中不存在该元素，则将其添加到补集中
                    if (!readySet.has(element)) {
                        complementSet.add(element)
                    }
                })

                this.noready_user_list = complementSet;


            },
            JoinHomeHandler(data) {
                console.log(data)
                if (data.status == 'error') return
                else if (data.status == 'no_full' || data.status == "full") {
                    this.set_usrlst(data);
                    if (this.ready_user_list.indexOf(localStorage.getItem("token")) >= 0){
                        this.ready = true
                    }
                }

                if (data.status == "full"){
                    this.$router.push("/Game")
                }

            }
        },
        name: "Room",
        components: {
            headerButton
        },
        created() {
            websocket.mapper_event['JoinHomeHandler'] = this.JoinHomeHandler;
        },
        mounted() {
            // 创建 WebSocket 实例
            console.log(websocket.mapper_event)
            websocket.getConnect()
            websocket.send("sing_in -289667014 only_get")

        }
    }
</script>

<style scoped>
    .center {
        width: 800px;
        height: 400px;
        background-color: rgba(130, 200, 230, .3);


    }

    .noready {
        color: darkred;
    }

    .inner {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: greenyellow;
        font-weight: bold;
        text-align: center;
    }

    .background {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: -24324;

        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: top;
    }

    .my_contianer {
        user-select: none;
        display: grid;
        place-content: center;
        height: 100vh;
        border: none;
    }
</style>